<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Sign Up</title>
        <style type="text/css">
            fieldset {
                border: 1px solid blue;
                margin: 0px auto;
            }

            legend {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        
        <form name="signUpForm" action="/xia/xie/de" method="get" target="_blank">
            <fieldset>
                <legend>基本信息</legend>
                <p>
                    <label for="username">登录名称</label>
                    <input type="text" name="username" id="username" placeholder="请输入登录名称">
                </p>
                <p>
                    <label for="password">登录密码</label>
                    <input type="password" name="password" id="password" placeholder="请输入登录密码">
                </p>
                <p>
                    <label for="confirm">确认密码</label>
                    <input type="password" name="confirm" id="confirm" placeholder="请确认登录密码">
                </p>
            </fieldset>
            <fieldset>
                <legend>详细信息</legend>
                <p>
                    <label for="real-name">真实姓名</label>
                    <input type="text" name="realName" id="real-name" placeholder="请输入真实姓名">
                </p>
                <p>
                    <label for="province">省份</label>
                    <select name="province" id="province">
                        <optgroup label="省份">
                            <option value="shannxi">陕西省</option>
                            <option value="shanxi">山西省</option>
                            <option value="gansu">甘肃省</option>
                            <option value="sichuan">四川省</option>
                            <option value="hubei">湖北省</option>
                            <option value="henan">河南省</option>
                        </optgroup>
                        <optgroup label="直辖市">
                            <option value="chongqing">重庆市</option>
                            <option value="wuwei">武威市</option>
                        </optgroup>
                    </select>
                </p>
            </fieldset>
            <fieldset>
                <legend>其它信息</legend>
                <p>
                    <label for="learn-mysql">MySQL:</label>
                    <progress max="100" value="80" name="learnMySQL" id="learn-mysql"></progress>
                    <output name="mysql"></output>
                </p>
                <p>
                    <label for="ice-cream-choice">Choose a flavor:</label>
                    <input list="flavors" id="ice-cream-choice" name="iceCreamChoice">
                    <datalist id="flavors">
                        <option value="Chocolate">
                        <option value="Coconut">
                        <option value="Mint">
                        <option value="Strawberry">
                        <option value="Vanilla">
                    </datalist>
                </p>
            </fieldset>
        </form>

        <script type="text/javascript">
            var p = document.querySelector('#learn-mysql');
            console.log( p );
            var v = p.value ;
            var m = p.max ;
            console.log( v , m );
            var r = v / m ;
            console.log( r );
            // 通过 表单的name 和 表单控件的name 来获得指定的元素
            var op = signUpForm.mysql;
            console.log( op );
            op.value = r * 100 + '%';
        </script>
    </body>
</html>